<?php echo $this->element('frontend/slide'); ?>
    <br/>
    <div class="clear"></div>
<div id="home_left">
     <?php echo $this->element("frontend/advert");?>
    <div class="clear">&nbsp;</div>

    <?php if(!empty($types)){
        echo $this->Html->script('frontend/jquery.carouFredSel-5.4.1');
        echo $this->Html->script('frontend/zoom');
        foreach($types as $key=>$val){
            $aTypes= $this->requestAction('/Pages/getType/'.$key);
            $aType=  array_keys($aTypes);
            $aType[]=$key;
            $products = $this->requestAction('/Pages/getProduct/'.implode(',',$aType));
           if(!empty($products)){?>
    <div class="productCateSlide" id="prCateSlide_<?php echo $key;?>">
                    <div class="bg_dot">
                        <div class="caption">
                            <a  href="<?php echo $this->Html->url("/products/type_product/$key");?>" target="_self"><?php echo $val;?></a>
                        </div>

                        <div class="prev_next">
                            <a class="prev" id="prev" href="#" style="display: block;"></a>
                            <a class="next" id="next" href="#" style="display: block;"></a>
                        </div>
                        <div class="menu_child">
                            <?php if(!empty($aTypes)){
                                foreach($aTypes as $kType=>$vType){ ?>
                                     <div class="itemmenu first">
                                            <a href="<?php echo $this->Html->url("/products/type_product/$kType");?>">
                                                <?php echo $vType;?>
                                            </a>
                                        </div>
                            <?php
                                }
                            }?>
                                       
                        </div>
                    </div>   
        <div class="caroufredsel_wrapper">
            <div class="list" >
                <?php 
                $i=0;
                foreach($products as $k=>$product){
                    $i++;
                ?>
                <div class="item <?php echo ($i%4==0)?'last':''?>">
                    <div class="wr_img">
                        <a target="_self" class="item-image" title="" rel="" href="<?php echo $this->Html->url("/products/detail/".$product['Product']['id']); ?>">
                            <img alt="<?php echo $product['Product']['product_code'];?>" src="<?php echo $product['Product']['image'];?>"  width="178px" height="315px" >
                        </a>
                    </div>
                    <div class="title">
                        <a href="<?php echo $this->Html->url("/products/detail/".$product['Product']['id']); ?>" target="_self">
                            <?php echo $product['Product']['product_name'];?>
                        </a>
                    </div>
                    <div class="price">
                        <a href="#" target="_self">
                            <?php echo number_format($product['Product']['price']);?> VNĐ
                        </a>
                         <?php if($product['Product']['type']==1)
                        {?>
                        <img src="<?php echo $this->webroot."img/frontend/"?>icon_new.png" class="">
                        <?php }else if($product['Product']['type']==2){?>
                          <img src="<?php echo $this->webroot."img/frontend/"?>ishot.gif" class="">
                      
                            <?php }?>
                            
                        
                    </div>
                </div>
           <?php } ?>
            </div>
        </div>
    </div>
        <script type="text/javascript">
            var id = "<?php echo 'prCateSlide_'.$key;?>";
            if ($('#'+id+' .list .item').length > 4) {
                $('#'+id+' .list').carouFredSel({
                    auto: false,
                    items: 4,
                    curcular: true,
                    infinite: false,
                    direction: "left",
                    scroll: {
                        play: true,
                        items: 4,
                        duration: 500,
                        pauseDuration: 3000,
                        pauseOnHover: true
                    },
                    prev: {
                        button: '#'+id+' #prev',
                        key: "left"
                    },
                    next: {
                        button: '#'+id+' #next',
                        key: "right"
                    }, height: 340
                });
            }
            //ZoomHover("#prCateSlide_"+id+" .list .item .wr_img img", 500, 500);
    </script>
    
     
 <?php
    }
            ?>
    
    <?php }
    
        }?>
 
</div>
<div id="home_right">
    <?php echo $this->element('frontend/news');?>
    <script type="text/javascript" src="image/jquery.carouFredSel-5.4.1.js"></script>
    <?php echo $this->element('frontend/hot');?>
    <?php echo $this->element('frontend/new');?>
</div>
</div>